import React, { Component } from "react";
import "./index.scss";
import { Form, Input, Button, message } from "antd";
import { connect } from "react-redux";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { login } from "../../api";
// import logo from "../../assets/images/logo.png";
import { createSaveUserInfoAction } from "../../redux/action_creators/login_action";
import { Navigate } from "react-router-dom";

@connect((state) => ({ isLogin: state.userInfo.isLogin }), {
  saveUserInfo: createSaveUserInfoAction,
})
class Login extends Component {
  componentDidMount() {
    // console.log(this.props, "a");
  }

  onFinish = async (values) => {
    const { username, password } = values;
    const res = await login(username, password);
    const { status, msg } = res.data;

    // console.log({ res });
    if (status === 0) {
      const { user, token } = res.data.data;
      localStorage.setItem("user", JSON.stringify(user));
      localStorage.setItem("token", token);
      // console.log(this.props,'cc')
      this.props.saveUserInfo(res.data.data);
      // console.log("te", this.state.user);
    } else {
      message.warning(msg);
    }
  };
  pwdValidator = (rule, value) => {
    if (!value) {
      return Promise.reject(new Error("kong"));
    } else if (value.length > 12) {
      return Promise.reject(new Error("12"));
    } else if (value.length < 4) {
      return Promise.reject(new Error("4"));
    } else if (!/^\w+$/.test(value)) {
      return Promise.reject(new Error("字幕xxxxxx"));
    }
    return Promise.resolve();
  };
  render() {
    return (
      <div className="login">
        {this.props.isLogin && <Navigate to="/admin/home" replace="true" />}
        <header>
          {/* <img src={logo} alt="logo" /> */}
          <h1 className="test">商品管理系统</h1>
        </header>
        <section>
          <h1>用户登录</h1>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true,
            }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: "Please input your username!",
                },
                {
                  max: 12,
                  message: "<12",
                },
                {
                  min: 4,
                  message: ">4",
                },
                {
                  pattern: /^\w+$/,
                  message: "必須是。。。",
                },
              ]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="Username"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ validator: this.pwdValidator }]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="Password"
              />
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
              >
                Log in
              </Button>
            </Form.Item>
          </Form>
        </section>
      </div>
    );
  }
}
export default Login;
// export default connect((state) => ({ isLogin: state.userInfo.isLogin }), {
//   saveUserInfo: createSaveUserInfoAction,
// })(Login);
